@extends('layouts.default')
@section('css')
    <link rel="stylesheet" href="{{asset('admin-lte/plugins/datatables/dataTables.bootstrap4.css')}}">
    {{--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">--}}
    {{--<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">--}}
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">分佣管理/ <a class="text-primary" href="{{url('admin/user/index')}}">用户列表</a></h3>
                </div>
                @include('layouts.message')
                <div class="" id="msg"></div>
                <!-- /.card-header -->
                <div class="card-body">
                    <table id="example1" class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>一级分销</th>
                            <th>二级分销</th>
                            <th>三级分销</th>
                            {{--<th>四级分销</th>--}}
                            <th>最后操作时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr id="tr">
                            <td>{{$list['id']}}</td>
                            <td><button class="btn-info" key="BNF_Lv1" description="一级分销" >{{$list['BNF_Lv1']}}</button></td>
                            <td><button class="btn-info" key="BNF_Lv2" description="二级分销">{{$list['BNF_Lv2']}}</button></td>
                            <td><button class="btn-info" key="BNF_Lv3" description="三级级分销">{{$list['BNF_Lv3']}}</button></td>
                            {{--<td><button class="btn-info" key="BNF_Lv4" description="四级级分销">{{$list['BNF_Lv4']}}</button></td>--}}
                            <td>{{$list['updated_at']}}</td>
                        </tr>
                        </tbody>
                        <tfoot>
                        <tr>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                        </tfoot>
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
        <!-- /.col -->
    </div>
    </div>
        <div  id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        {{--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>--}}
                        <h4 class="modal-title" id="gridSystemModalLabel">修改分佣比例</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-inline">
                            <div class="form-group">
                                <label for="rate" id="rateLabel">分佣比例：</label>
                                <input type="text" class="form-control" id="rate" name="" placeholder="请输入2位小数" style="margin-left: 10px" value="">
                            </div>
                        </form>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" id="modify">修改</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
            <!-- /.card -->
        </div>
        <input type="hidden" name="baseUrl" id="baseUrl" value="{{$baseUrl}}">


        @stop

@section('script')
    <script src="{{asset('admin-lte/plugins/datatables/jquery.dataTables.js')}}"></script>
    <script src="{{asset('admin-lte/plugins/datatables/dataTables.bootstrap4.js')}}"></script>
    <script>
        $(function () {
            $("#example1").DataTable({
                "language"  : {
                    url :'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Chinese.json',
                },
                "lengthChange": false,
                "searching": false,
            });

            $('#tr').on('click',function (e) {
                let el = e.target;
                if (el.nodeName.toLowerCase()  == 'button'){
                    let val = el.innerText;
                    $('#rateLabel').text($(el).attr('description')+'比例:');
                    $('#rate').attr('name',$(el).attr('key'));
                    $('#rate').val(val);
                    $('#myModal').modal();

                }
            })

            $('#modify').on('click',function (e) {
                let baseUrl     = $('#baseUrl').val();
                let RequsetUrl  = baseUrl +'/admin/rebate/edit';
                let key         = $('#rate').attr('name');
                let rate        = parseFloat($('#rate').val());
                if (rate>0&&!isNaN(rate)){
                        let href                = `${RequsetUrl}/${key}/${rate}`;
                        location.href           =   href;
                }else {
                        $('#msg').html(`
                        <div class="alert alert-danger">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                请输入2位小数的分佣比例
                         </div>`
                        );
                }
            })

        });
    </script>
@stop